* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color1: #EEEEEE;
    --color2: #32E0C4;
    --color3: #0D7377;
    --color4: #212121;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color4);
    background-color: var(--color1);
}
/* Start of Header */
header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 35px;
    background-color: var(--color4);
}

header h1 {
    font-weight: bold;
    font-size: 48px;
    background-color: var(--color2);
    padding: 0 20px 0 60px;
    margin-left: -33px;
}

header a {
    text-decoration: none;
    color: var(--color4);
}

header a:hover {
    box-shadow: 1px 1px 20px 0px var(--color3);
    transition: .5s;
} 

header nav {
    margin: 7px 0;
}

header nav ul {
    display: flex;
    flex-wrap: wrap;    
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

header nav ul li a {
    padding: 10px 15px;
    font-weight: bold;
    font-size: 2.55vw;
    color: var(--color2);
}

/* Start of Hero */
#grad {
    height: 300px;
    background-image: linear-gradient(var(--color3), var(--color2));
}

.hero {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px; 
}

.hero-h2 {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    align-items: flex-end;
    color: var(--color4);
}

.hero img {
   height: 80%;
   max-width: 100%
}

/* Start of About Me*/
.section-title {
    width: 95%;
    display: flex;
}

.sidebar {
    font-size: 46px;
    color: var(--color3);
    padding-left: 30px;
    
}

 .text {
     flex: 1;
     padding: 0 0 30px 100px;
 }

 /* Start of Work */ 
 .work-grid-wrapper {
     width: 100%;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: 30px;
     
 }

 .work-grid-container {
     width: 70%;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, 200px);
     grid-gap: 15px;
     padding-left: 50px;
 }

 .projects {
     text-decoration: none;
     display: flex;
     box-shadow: 1px 1px 20px 0px var(--color3);
     position:relative;
 }

 .projects::after {
    content: "";
    height: 100%;
    width: 100%;
    background: rgba(13, 115, 119, .3);
    position: absolute;
    background: linear-gradient( rgba(13, 115, 119, .3), var(--color1));
    opacity: 0;
    transition: ease-in-out .5s;
 }

 .work-grid-container:hover .projects::after {
    opacity: 1;
}

 .project-title {
     color: var(--color2);
    font-size: 18px;
    display:flex;
    align-items: flex-end;
    flex-wrap: wrap;
 }

 .draft-room {
    background-image: url("../images/draft-room.png");
    background-size: cover;
    width: 100%;
    grid-column: 1 / span 3;
 }

 .movie-hunt {
     background-image: url("../images/movie-hunt.png");
     background-size: cover;
     grid-column: 1 / span 3;
 }

 /* Contact Me */

 .contact {
     width: 100%;
     margin-bottom: 30px;
 }
    
.contact-wrapper {
    display: flex;
    justify-content: space-around;
    width: 70%;
    padding-left: 50px;
}

.contact-wrapper a {
    text-decoration: none;
    color: var(--color2);
}

.contact-wrapper p {
    color: var(--color2);
    font-size: 2.55vw;
}

.contact-wrapper p a:hover {
    box-shadow: 1px 1px 20px 0px var(--color3);
    transition: .5s;
}

/* Start of Footer */

footer {
    padding-left: 30px;
    background-color: var(--color4);
    color: var(--color2);
    font-size: 2vw;
    padding: 10px 0 10px 30px;
}

/* MEDIA QUERY FOR SMALLER DESKTOP SCREENS AND SMALLER */

@media screen and (max-width:958px) {
    .work-grid-container {
        object-fit: cover;
        width: 100%;
        max-height: 100%;
    }

    .contact-wrapper {
        width: 100%;
        padding-right: 20px;
    }
}

/* MEDIA QUERY FOR SMALLER DESKTOP SCREENS AND SMALLER */

    @media screen and (max-width:718px) {
    .work-grid-container {
        object-fit: cover;
        width: 100%;
        max-height: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 100px);
    }

    .text {
        font-size: 3.55vw;
    }

    .contact-wrapper {
        width: 100%;
        flex-direction: column;
    }

    .sidebar {
        font-size: 5.5vw
    }
    section.wrap {
        display: block;
        float: left;
    }

    .hero-h2 {
        font-size: 18px;
    }
}

/* MEDIA QUERY FOR SMALLER DESKTOP SCREENS AND SMALLER */

@media screen and (max-width:370px) {
    .work-grid-container {
        object-fit: cover;
        width: 100%;
        max-height: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 65px);
    }
}